import React, { PureComponent } from "react";
import store from "../store";
import { decreaseCountAction } from "../store/count";

export class Profile extends PureComponent {
  constructor() {
    super()
    this.state = {
      count: store.getState().count.count
    }
  }

  componentDidMount() {
    store.subscribe(() => {
      this.setState({
        count: store.getState().count.count
      })
    })
  }

  changeCount(value) {
    store.dispatch(decreaseCountAction(value))
  }

  render() {
    const { count } = this.state
    return (
      <div>
        <div>profile count: {count}</div>
        <button onClick={() => this.changeCount(1)}>-1</button>
        <button onClick={() => this.changeCount(3)}>-3</button>
        <button onClick={() => this.changeCount(5)}>-5</button>
      </div>
    )
  }
}

export default Profile;
